<template>
    <view class="flex-col homepage">
        <view class="flex-col wrapper">
            <view class="flex-row wraper-row">
                <view class="u-line-1 text">费用类型</view>
                <view class="u-line-1 text-two">体检费</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 2rpx"></u-line>
            <view class="flex-row wraper-row">
                <view class="u-line-1 text">就诊人</view>
                <view class="u-line-1 text-two">{{patient.name}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 2rpx"></u-line>
            <view class="flex-row wraper-row-two">
                <view class="u-line-1 text">身份证号</view>
                <view class="u-line-1 text-two">{{patient.number}}</view>
            </view>
            <view class="u-line-1 text-three"></view>
        </view>
        <view class="flex-col wrapper-two">
            <view class="u-line-1 text-four">费用明细</view>
            <u-line class="line" margin="0rpx 0rpx 16rpx 2rpx"></u-line>
            <view class="u-line-1 text-five">{{taocan.setMealName}}</view>
            <view class="flex-row wraper-row-three">
                <view class="flex-row box">
                    <view class="u-line-1 text-six">单价：￥{{taocan.price}}</view>
                    <view class="u-line-1 text-seven">数量：1</view>
                </view>
                <view class="u-line-1 text-eight">￥{{taocan.price}}</view>
            </view>
        </view>
        <view class="flex-col wrapper-three">
            <view class="u-line-1 text-nine">支付方式</view>
            <view class="u-line-1 text-ten">余额</view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 2rpx"></u-line>
            <view class="u-line-1 text-eleven">卡内余额</view>
            <view class="flex-row wraper-row-four">
                <view class="flex-row box-two">
                    <view class="u-line-1 text-twelve">{{patient.patientCard.balance}}元</view>
                    <view class="flex-row box-row">
                        <view class="u-line-1 text-thirteen">去充值</view>
                        <u-icon class="icon-arrow-right" name="arrow-right" color="#d7d7d7"></u-icon>
                    </view>
                </view>
            </view>
        </view>
        <view class="flex-row wrapper-four">
            <view class="u-line-1 text-fourteen">预约前请仔细阅读</view>
            <view class="u-line-1 text-fifteen" @click="Toxuzhi">《体检须知》</view>
        </view>
        <view class="flex-row wrapper-five">
            <view class="u-line-1 text-sixteen">合计：</view>
            <view class="u-line-1 text-seventeen">￥{{taocan.price}}</view>
            <view class="flex-row wraper-col">
                <view class="u-line-1 text-eighteen" @click="confirm">确认支付</view>
            </view>
        </view>
		<view>
			<u-popup :show="show" :round="10" @close="close" :overlay='overlay' @open="open" mode="center"
				:closeable="closeable" :closeOnClickOverlay="closeOnClickOverlay">
				<view style="width: 300px;height: 200px;">
					<p style="font-size: 18px;text-align: center;margin-top: 25px;">请输入就诊卡密码</p>
					<u-code-input v-model="value" :maxlength="6" style="margin-left: 15px;margin-top: 30px;" dot></u-code-input>
					<u-button @click="zhifu" type="primary" text="确定" style="width: 250px;margin-top: 30px;"></u-button>
				</view>
			</u-popup>
		
		</view>
    </view>
</template>
<script>
	import request from '@/utils/requestConfig.js'
    export default {
        data() {
            return {
				URL: 'http://localhost:9000/', //主域名
				patient:{},
				taocan:{},
				show: false,
				overlay: true,
				closeable: true,
				closeOnClickOverlay: true,
				//套餐类型id
				packageId:'',
				//就诊卡密码
				value:'',
			}
        },
		onLoad() {
			this.patient = uni.getStorageSync('patient')
			console.log(this.patient)
			this.taocan = uni.getStorageSync('taocan')
			console.log(this.taocan)
			this.packageId = uni.getStorageSync('packageId')
			
		},
        methods: {
			confirm() {
				console.log("确认预约")
				this.show = true
			},
			zhifu(){
				request.post("/user/user/patient-card/deductMoney",
				{
					money:this.patient.patientCard.balance,
					hospitalNumber:this.patient.hospitalNumber,
				}).then((res) => {
						console.log("成功")
						
						uni.showToast({
							title: '预约成功',
							duration: 2000,
						})
						
						//1、记录表生成扣费记录  （就诊人id，就诊卡id，科室id，说明，金额，）
						this.addjilu()
						//2、体检预约表生成记录  （就诊人id，套餐类型id，套餐id，状态，）
						this.addtijian()
						setTimeout(() => {
							
							uni.reLaunch({
								url: '../index/index'
							})
						}, 2000)
						
				
					}) //请求成功
					.catch((error) => {
						console.log(error);
					});
			},
			addtijian(){
				uni.request({
					url: this.URL + 'appointment/appointment/medical-appointment/addtijian',
					method: "POST",
					data: {
						//就诊人id
						patientId:this.patient.id,
						//套餐id
						packageId:this.taocan.id,
						//套餐类型id
						packagetypeId:this.packageId,
						
					},
					success: (res) => {
						if (res.data.code == 20000) {
							console.log("生成体检记录成功")
						}
					}
				})
			},
			addjilu(){
				uni.request({
					url: this.URL + 'record/record/record/addTijianJIlu',
					method: "POST",
					data: {
						//就诊人id
						patientId:this.patient.id,
						//就诊卡id
						patientcardDi: this.patient.patientCard.id,
						//金额
						money: this.taocan.price,
						
					},
					success: (res) => {
						if (res.data.code == 20000) {
							console.log("生成记录表记录成功")
							
							
						}
					}
				})
			},
			Toxuzhi(){
				setTimeout(() => {
					uni.navigateTo({
						url: '../zqw/tijianxuzhi'
					})
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
        }
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        padding: 54rpx 0rpx 0rpx 29rpx;
        border-width: 30rpx;
        border-top-color: #aaaaa;

        .wrapper {
            width: 692rpx;
            margin-bottom: 44rpx;
            padding: 30rpx 0rpx 34rpx 20rpx;
            border-radius: 10rpx;
            background: #ffffff;

            .wraper-row {
                width: 672rpx;
                justify-content: space-between;
                margin-right: auto;
                margin-bottom: 30rpx;
                margin-left: auto;

                .text {
                    width: 140rpx;
                    font-size: 32rpx;
                    color: #aaaaaa;
                }

                .text-two {
                    width: 522rpx;
                    font-size: 32rpx;
                }
            }

            .line {
                width: 648rpx;
            }

            .wraper-row-two {
                width: 672rpx;
                justify-content: space-between;
                margin-right: auto;
                margin-left: auto;

                .text {
                    width: 140rpx;
                    font-size: 32rpx;
                    color: #aaaaaa;
                }

                .text-two {
                    width: 522rpx;
                    font-size: 32rpx;
                }
            }

            .text-three {
                bottom: -14rpx;
                left: -28rpx;
                position: absolute;
            }
        }

        .wrapper-two {
            width: 692rpx;
            margin-bottom: 30rpx;
            padding: 30rpx 0rpx 34rpx 20rpx;
            border-radius: 10rpx;
            background: #ffffff;

            .text-four {
                width: 140rpx;
                margin-bottom: 30rpx;
                font-size: 32rpx;
                color: #aaaaaa;
            }

            .line {
                width: 648rpx;
            }

            .text-five {
                width: 522rpx;
                margin-left: 2rpx;
                font-size: 32rpx;
            }

            .wraper-row-three {
                width: 648rpx;
                justify-content: space-between;
                margin-left: 2rpx;

                .box {
                    width: 436rpx;
                    margin-top: 14rpx;

                    .text-six {
                        width: 224rpx;
                        margin-right: -12rpx;
                        font-size: 28rpx;
                        color: #aaaaaa;
                    }

                    .text-seven {
                        width: 224rpx;
                        font-size: 28rpx;
                        color: #aaaaaa;
                    }
                }

                .text-eight {
                    width: 208rpx;
                    font-size: 32rpx;
                }
            }
        }

        .wrapper-three {
            width: 692rpx;
            margin-bottom: 40rpx;
            padding: 30rpx 0rpx 34rpx 20rpx;
            border-radius: 10rpx;
            background: #ffffff;

            .text-nine {
                width: 140rpx;
                margin-bottom: -38rpx;
                font-size: 32rpx;
                color: #aaaaaa;
            }

            .text-ten {
                width: 522rpx;
                margin: 0rpx 0rpx 30rpx 150rpx;
                font-size: 32rpx;
            }

            .line {
                width: 648rpx;
            }

            .text-eleven {
                width: 140rpx;
                margin: 0rpx 0rpx -38rpx 2rpx;
                font-size: 32rpx;
                color: #aaaaaa;
            }

            .wraper-row-four {
                width: 522rpx;
                margin-left: 150rpx;

                .box-two {
                    width: 522rpx;

                    .text-twelve {
                        width: 100%;
                        font-size: 32rpx;
                    }

                    .box-row {
                        width: 158rpx;
                        top: 0rpx;
                        right: 0rpx;
                        position: absolute;

                        .text-thirteen {
                            width: 100%;
                            font-size: 32rpx;
                            color: #006eff;
                        }

                        .icon-arrow-right {
                            bottom: 2rpx;
                            right: 12rpx;
                            position: absolute;
                        }
                    }
                }
            }
        }

        .wrapper-four {
            width: 708rpx;
            margin-bottom: 100rpx;

            .text-fourteen {
                width: 100%;
                color: #cececf;
            }

            .text-fifteen {
                width: 174rpx;
                top: 0rpx;
                left: 234rpx;
                position: absolute;
                color: #1a7cff;
            }
        }

        .wrapper-five {
            width: 692rpx;
            padding: 46rpx 0rpx 44rpx 40rpx;
            border-top-width: 2rpx;
            border-top-style: solid;
            border-top-color: #aaaa;

            .text-sixteen {
                width: 96rpx;
                margin-right: -12rpx;
                font-size: 32rpx;
            }

            .text-seventeen {
                width: 162rpx;
                font-size: 36rpx;
                color: #f46363;
            }

            .wraper-col {
                width: 364rpx;
                justify-content: center;
                padding: 46rpx 0rpx;
                top: 2rpx;
                right: 0rpx;
                background: #006eff;
                position: absolute;

                .text-eighteen {
                    width: 160rpx;
                    letter-spacing: 2rpx;
                    font-size: 36rpx;
                    color: #ffffff;
                }
            }
        }
    }
</style>